<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cart</title>
    <script src="lib/jquery/dist/jquery.min.js"></script>
    <script src="lib/vue/dist/vue.min.js"></script>
    <script src="lib/axios/dist/axios.js" ></script>
    <link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="js/cart.js"></script>

</head>
<body>

  <template id="pager">
   <div>
      <nav aria-label="...">
          <ul  class="pagination">
             
            <li :class="{'disabled':curr_page==1}" @click="fetch(curr_page-1)">
                <a href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
            </li>

            <li v-for="i in total_page" @click="fetch(i)" :class="{'active':i==curr_page}">
               <a href="#">{{i}} </a>
            </li>

              <li :class="{'disabled':curr_page==total_page}" @click="fetch(curr_page+1)">
                <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>

          </ul>
        </nav>
        <span>共{{total_page}}页,当前第{{curr_page}}页,(每页默认5条)</span>
   </div>
  </template>

<div id="mycart">

  <div class="panel panel-info" style="margin:20px;">
      <!-- 头部 -->
    <div class="panel-heading">
        <h1 style="display: inline-block;"><span v-text="name"></span> 的购物车</h1>
        <br><span>共{{total_page}}页,</span><span>当前页清单总数
          <span class="label label-warning" >{{carts.length}}</span>
          ,未采购{{uncount}}
        </span>
    </div>

    <!-- 内容 -->
    <div class="panel-body">
        <div class="input-group">
          <input class="form-control" type="text" v-model="myitem" @keydown.enter="add(myitem)" /> 
          <span class="input-group-btn">
            <button class="btn btn-primary" @click="add(myitem)"  :disabled="myitem == ''">添加</button>
          </span>
        </div>
      
        <table class="table">
          <thead>
            <tr>
              <th>名称</th>
              <th>数量</th>
              <th>选择</th>
              <th>付款</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(v,index) in carts">
              <td>{{v.itemName}}</td>
              <td>{{v.qty}}</td>
              <td><input type="checkbox"  v-model="v.payflg" @change="changeList" /></td>
              <td>{{v.payflg | payFilter}}</td>
              <td><button type="button" class="btn btn-danger btn-sm" @click="del(index)" :disabled="!v.payflg">删除</button></td>
            </tr>
          </tbody>
        </table>

        <!-- 分页组件-->
        <mypager :total_page="total_page"   v-on:e-page="fetch">
        </mypager>
    </div>
  </div>
</div>
</body>
</html>